<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;c">
				<div class="cuIcon-back icon left" @click="back" style=""></div>
				<div class="center" style="">
					<span class="textName">{{ book_name }}</span>
				</div>
			</view>
		</view>
		<div style="height: 90rpx"></div>
		<div style="height: calc(100vh - 90rpx); width: 100vw">
			<!-- 		<iframe :src='viewerUrl' width='100%' height='100%' frameborder='1'>
			            </iframe> -->
			<!-- <web-view :src="allUrl"></web-view> -->

			<scroll-view
				style="width: 100%; font-size: 0; height: 100%"
				:scroll-top="scrollTop"
				scroll-y="true"
				class="scroll-Y"
				@scrolltoupper="upper"
				@scrolltolower="lower"
				@scroll="scroll"
			>
				<span style="width: 100%;display: inline-block;" v-for="(item, index) in imgs" :key="index"  :class="!item.loadType?'imgLoad':''">
					<img :src="item.image_url" alt="" style="width: 100%;height: 100%;" @load="imgLoadTo(item)" />
				</span>
			</scroll-view>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			viewerUrl: '',
			allUrl: '/hybrid/html/web/viewer.html',
			imgs: [],
			scrollTop: 0,
			page_number: 0,
			page_index: 6,
			book_name: 'PPT课件'
		};
	},
	onLoad(e) {
		this.id = e.id;
	},
	onShow() {
		// this.viewerUrl='http://view.xdocin.com/xdoc?_xdoc='+"http://recharge.lyuncai8888.com/static/img/test.ppt"
	},
	mounted() {
		this.getData();
	},
	methods: {
		imgLoadTo(item) {
			this.$set(item, 'loadType', true);
		},
		upper(e) {
			// //console.log('upper==', e)
		},
		lower(e) {
			console.log('lower=滚动到了底部=', e);
			if (this.count > this.page_number + 1) {
				this.getMore();
			}
		},
		scroll(e) {
			// //console.log('scroll==', e)
		},
		getMore() {
			if (this.count > this.page_number + 1) {
				this.page_number++;
				this.getMoreImgList();
				//console.log('加载更多');
			} else {
				//console.log('没有更多了');
			}
		},
		getData() {
			this.imgs = [];
			let _this = this;
			_this.uniRequest({
				url: '/ppt/exhibition',
				method: 'post',
				data: {
					ppt_id: _this.id,
					// page_index: _this.page_index,
					page_number: _this.page_number
				},
				success: res => {
					if (res.code == 200) {
						console.log('返回值', res);
						// res.data.path="http://recharge.lyuncai8888.com/static/img/test.ppt"
						// this.viewerUrl='http://view.xdocin.com/xdoc?_xdoc='+res.data.path
						res.data.image.map(item => {
							item.loadType = false;
							return item;
						});
						console.log(res.data.image);
						this.book_name = res.data.book_name || 'PPT课件';
						this.count = res.data.count;
						this.imgs = res.data.image;
						this.page_number = res.data.image[res.data.image.length - 1].page_number - 1;
					}
				}
			});
		},
		getMoreImgList() {
			let _this = this;
			_this.uniRequest({
				url: '/ppt/exhibition',
				method: 'post',
				data: {
					ppt_id: _this.id,
					// page_index: _this.page_index,
					page_number: _this.page_number
				},
				success: res => {
					if (res.code == 200) {
						console.log('返回值', res);
						// res.data.path="http://recharge.lyuncai8888.com/static/img/test.ppt"
						res.data.image.map(item => {
							item.loadType = false;
							return item;
						});
						this.count = res.data.count;
						this.imgs = this.imgs.concat(res.data.image);
						this.page_number = res.data.image[res.data.image.length - 1].page_number - 1;
					}
				}
			});
		},
		back() {
			uni.navigateBack()
			// uni.navigateTo({
			// 	url: `/pages/index/index?type=3`
			// });
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	min-height: 100vh;
	background-color: #eee7e5;
	.topNav {
		background: #fffaf0;
		color: #000000;
	}
	.textName {
		width: 80%;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.imgLoad {
		position: relative;
	}
	.imgLoad::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(~@/static/imgs/loading.gif) no-repeat center center;
		background-color: white;
	}
}
</style>

<!-- <template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;background-color: #3d3d3d;">
				<div class="cuIcon-back icon left" @click="back" style='color: white;'></div>
				<div class="center" style='color: white;'>报告详情</div>
			</view>
		</view>
		<web-view :src="allUrl"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			viewerUrl: '/hybrid/html/web/viewer.html',
			allUrl: ''
		};
	},
	onLoad() {
		this.allUrl = this.viewerUrl;
	},
	methods: {
		// base64转blob
		base64ToBlob(base64Data) {
			let arr = base64Data.split(','),
				fileType = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				l = bstr.length,
				u8Arr = new Uint8Array(l);

			while (l--) {
				u8Arr[l] = bstr.charCodeAt(l);
			}
			return new Blob([u8Arr], {
				type: fileType
			});
		},
		back() {
			uni.navigateBack({
				delta: 2
			});
		}
	}
};
</script>

<style lang="less" scoped></style> -->
